<template>
  <div>

  <!-- 底部评论 -->
    <commetntText :isShowCommetntText="isShowCommetntText" @CommenSendClick="CommenSendClick"></commetntText>


    <div class="particulars" v-if="particularsData">
      <!-- 图片模式 -->
      <div class="photo" v-if="particularsData.type==1">
        <!-- 头 -->
        <div class="top">
          <span class="iconfont iconjiantou2" @click="goBack"></span>
          <span class="iconfont iconnew"></span>

          <div class="right">
            <div
              class="has_follow"
              @click="hasAttention "
              :class="{
              hasNo_follow:has_follow
          }"
            >{{ has_follow ? '已关注':'关注'}}</div>
          </div>
        </div>

        <div class="title">
          <h2>{{particularsData.title}}</h2>
          <p>
            <span>{{particularsData.user.nickname}}</span>
            <span>{{particularsData.create_date.split('T')[0]}}</span>
          </p>
        </div>
        <!-- 接受的数据html -->
        <div class="content" v-html="particularsData.content"></div>
      </div>
      <!-- 视频模式 -->
      <div class="video" v-else-if="particularsData.type==2">
        <!-- 头 -->
        <div class="top">
          <span class="iconfont iconjiantou2" @click="goBack"></span>
          <span class="iconfont iconnew"></span>
        </div>
        <div class="videoCenter">
          <img :src="particularsData.cover[0].url" alt />
          <span class="iconfont iconshipin"></span>
        </div>
        <div class="user">
          <div class="user_left">
            <img
              class="head_img"
              :src=" $axios.defaults.baseURL+ particularsData.user.head_img"
              alt
            />
            <span>{{particularsData.user.nickname}}</span>
          </div>
          <div class="user_right">
            <div class="right">
              <div
                class="has_follow"
                @click="hasAttention "
                :class="{
              hasNo_follow:has_follow
          }"
              >{{ has_follow ? '已关注':'关注'}}</div>
            </div>
          </div>
        </div>
        <p class="title">{{particularsData.title}}</p>
      </div>
      <!-- 点赞 of 微信 -->
      <div class="has_like">
        <div class="like" @click="hasLike">
          <span class="iconfont icondianzan" :class="{
            islike:islike
        }"></span>
          {{comment_like}}
        </div>
        <div class="Wechat">
          <span class="iconfont iconweixin"></span>微信
        </div>
      </div>
      <!-- 精彩跟帖 -->
      <div class="comment" @click="replyTarget">
        <div class="title">精彩跟帖</div>
        <!-- 评论组件 -->
        <comment :comment="item" v-for="(item,index) of (comment)" :key="index"></comment>
        <div class="morecomment">
          <router-link :to="'/FollowUp?id='+$route.query.id">更多评论</router-link>
        </div>
      </div>
    </div>

  
  </div>
</template>

<script>
import comment from "../components/comment/comment";
import commetntText from "../components/comment/commentText.vue";
export default {
  data() {
    return {
      particularsData: "",
      hasAttentionMessage: "",
      has_follow: false,
      comment_like: 1,
      islike: false,
      comment: [],
      parent_id: undefined,
      isShowCommetntText: false
    };
  },
  methods: {
    getList() {
      this.$axios({
        method: "get",
        url: "/post/" + this.$route.query.id
      }).then(res => {
        const { data } = res.data;
        this.particularsData = data;
        this.has_follow = data.has_follow;
        this.comment_like = data.comment_length;
      });
    },
    hasAttention() {
      //如果有关注就取消 没关注就关注
      if (this.has_follow) {
        this.$axios({
          method: "get",
          url: "/user_unfollow/" + this.$route.query.id
        }).then(res => {
          //   console.log(res.data.message);
        });
      } else {
        this.$axios({
          method: "get",
          url: "/user_follows/" + this.$route.query.id
        }).then(res => {
          //   console.log(res.data.message);
        });
      }
      this.has_follow = !this.has_follow;
    },
    hasLike() {
      this.$axios({
        method: "get",
        url: "/post_like/" + this.$route.query.id
      }).then(res => {
        const { message } = res.data;
        if (message == "点赞成功") {
          this.comment_like++;
        } else {
          this.comment_like--;
        }
        this.islike = !this.islike;
      });
    },
    goBack() {
      this.$router.back();
    },
    // 获取评论列表
    getCommentList() {
      this.$axios({
        method: "get",
        url: "/post_comment/" + this.$route.query.id
      }).then(res => {
        const { data } = res.data;
        if (data.length >= 3) {
          data.length = 3;
        }
        this.comment = data;
      });
    },

    // ! 点击发送评论
    CommenSendClick(value) {
      // console.log(this.parent_id);
      this.$axios({
        method: "post",
        url: `/post_comment/` + this.$route.query.id,
        data: {
          content: value,
          parent_id: this.parent_id
        }
      }).then(res => {
        console.log(res);
        this.parent_id = undefined;
        this.getCommentList();
      });
    },
    // ! 回复事件委托
    replyTarget(e) {
      if (e.target._prevClass == "reply") {
        const parent_id = e.target.getAttribute("data-replyId");
        // this.isShowComment = false;
        this.isShowCommetntText = !this.isShowCommetntText;
        this.parent_id = parent_id;
      }
    }
  },
  mounted() {
    this.getList();
    this.getCommentList();
  },
  components: {
    comment,
    commetntText
  }
};
</script>

<style lang="less" scoped>
.particulars {
  //头部 返回 关注
  .top {
    padding: 2.778vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .has_follow {
    border: 1px solid #ccc;
    background-color: #f2f2f2;
    width: 13.889vw;
    height: 5.556vw;
    text-align: center;
    border-radius: 3.611vw;
  }
  .hasNo_follow {
    border: 1px solid transparent;
    color: white;
    font-weight: 700;
    background-color: red;
  }
  .iconnew {
    flex: 1;
    font-size: 12.778vw;
  }
  // 点赞 of 微信
  .has_like {
    display: flex;
    justify-content: space-around;
    .like,
    .Wechat {
      width: 20.833vw;
      height: 8.889vw;
      border-radius: 4.444vw;
      border: 1px solid #797979;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        padding-right: 1.389vw;
      }
    }
    .islike {
      color: red;
      font-weight: 700;
    }
    .iconweixin {
      color: limegreen;
    }
  }
  // 返回数据的强制渲染
  /deep/ img {
    width: 100%;
  }
  /deep/ p {
    font-size: 18px;
  }
  // 图片
  .photo {
    padding: 2.778vw;

    .title {
      padding-bottom: 4.444vw;
      h2 {
        font-size: 5.556vw;
        color: #333333;
      }
      span {
        color: #868686;
        padding-left: 8px;
      }
    }
  }
  //视频
  .video {
    padding: 2.222vw;

    .videoCenter {
      position: relative;
      .iconshipin {
        width: 16.667vw;
        height: 16.667vw;
        line-height: 16.667vw;
        font-size: 13.889vw;
        text-align: center;
        background-color: #cccccc;
        color: #ffffff;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .user {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user_left {
        display: flex;
        align-items: center;
        img {
          width: 13.889vw;
          height: 13.889vw;
          border-radius: 50%;
          object-fit: cover;
        }
        > span {
          padding-left: 5.556vw;
          color: #868686;
        }
      }
    }
    .title {
      padding-left: 1.389vw;
      padding-top: 5.556vw;
    }
  }
}
// 评论列表div
.comment {
  padding-bottom: 22.222vw;
  .morecomment {
    margin: auto;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #000;
  }
}
</style>